<template>
	<view class="addAddress">
		<view class="area-title">收货姓名</view>
		<view class="row_input_box"><input type="text" v-model="addressObj.fullname" placeholder="请输入联系人" /></view>
		<view class="area-title">联系电话</view>
		<view class="row_input_box"><input type="text" v-model="addressObj.phone" placeholder="请输入联系电话" /></view>
		<view class="area-title">省市区</view>
		<view class="row_input_box" @tap="openMap">
			<span v-show="!addressObj.province">请选择</span>
			<span v-show="addressObj.province">{{ addressObj.province }} {{ addressObj.city }}
				{{ addressObj.county }}</span>
		</view>
		<view class="area-title">详细地址</view>
		<view class="row_input_box"><input type="text" v-model="addressObj.address" placeholder="请输入详细地址" /></view>
		<view class="area-title">门牌号</view>
		<view class="row_input_box"><input type="text" v-model="addressObj.num" placeholder="请输入门牌号" /></view>
		<view class="set_defalut_address">
			<image class="icon-30" v-show="addressObj.status == 0"
				src="../../static/images/icon/icon_check_raido_gary.png" mode="" @tap="addressObj.status = 1"></image>
			<image class="icon-30" v-show="addressObj.status == 1"
				src="../../static/images/icon/icon_check_raido_fill.png" mode="" @tap="addressObj.status = 0"></image>
			<view class="fn-sz-30 fn-cl-333333 mar-left-10">设为默认地址</view>
		</view>
		<button class="yellow_btn" @tap="submitAddAddress">提交</button>
	</view>
</template>

<script>
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				index: '',
				curRegion: '',
				addressObj: {
					fullname: '',
					phone: '',
					province: '',
					city: '',
					county: '',
					address: '',
					longitude: '',
					latitude: '',
					status: '0',
					num: ''
				},
				pageType: ''
			};
		},
		onLoad(val) {
			console.log(val, '后去到的收货地址');
			if (val.address_info) {
				this.addressObj = JSON.parse(val.address_info);
			}
			if (val.pageType == 'order') {
				this.pageType = val.pageType
			}
			qqmapsdk = new QQMapWX({
				key: 'LPPBZ-KHRKX-U5K4E-ZLQSE-6SZJZ-KDBKQ' //自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请
			});
		},
		methods: {
			submitAddAddress() {
				if (this.addressObj.id) {
					const {
						id,
						fullname,
						phone,
						province,
						city,
						county,
						address,
						longitude,
						latitude,
						status,
						num
					} = this.addressObj;
					let params = {
						id,
						fullname,
						phone,
						province,
						city,
						county,
						address,
						longitude,
						latitude,
						status,
						num
					}
					this.$api.editAddr(params).then(res => {
						if (res.code == 1) {
							// if (this.pageType == 'order') {
							// 	this.$helper.toast(res.msg);
							// 	let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							// 	let prevPage = pages[pages.length - 2]; //上一页页面实例
							// 	prevPage.$vm.chooseAddress(params); // 給上一頁綁定方法otherFun,傳參object
							// }
							uni.navigateBack();
						}
					});
				} else {
					this.$api.addAddr(this.addressObj).then(res => {
						if (res.code == 1) {
							this.$helper.toast(res.msg);
							if (this.pageType == 'order') {
								let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
								let prevPage = pages[pages.length - 2]; //上一页页面实例
								prevPage.$vm.addAddressFunc({
									...this.addressObj,
									id: res.data.id
								}); // 給上一頁綁定方法otherFun,傳參object
							}
							uni.navigateBack();
						}
					});
				}
			},
			openMap() {
				let that = this;
				uni.getFuzzyLocation({
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					success(res) {
						console.log(res, '获取地址成功');
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.chooseLocation({
							latitude, //要去的纬度-地址
							longitude, //要去的经度-地址
							success(rex) {
								console.log('选择地址成功', rex, that, this);
								that.getLocal(rex.latitude, rex.longitude);
								console.log(that.addressObj, '选择地址');
							},
							fail(res) {
								console.log(res, '选择地址失败原因');
							}
						});
					},
					fail(res) {
						that.$mUtils.toast('定位失败，请打开手机定位再试!');
					}
				});
			},
			// 获取当前地理位置
			getLocal(latitude, longitude) {
				let that = this;
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success: res => {
						console.log(res, '当前地理位置');
						let address = {};
						that.addressObj.province = res.result.address_component.province;
						that.addressObj.city = res.result.address_component.city;
						that.addressObj.county = res.result.address_component.district;
						that.addressObj.address = res.result.address_component.street_number;
						that.addressObj.latitude = res.result.location.lat;
						that.addressObj.longitude = res.result.location.lng;
						// this.userAddress=res.result.address;
						// uni.setStorageSync('address', address);
					},
					fail: res => {
						console.log(res);
					},
					complete: res => {
						// console.log(res);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.addAddress {
		min-height: 100vh;
		background-color: #fff;
		padding: 24rpx;
		box-sizing: border-box;

		.row_input_box {
			display: flex;
			align-items: center;
			padding: 24rpx;
			height: 90rpx;
			box-sizing: border-box;
			background: #f9f9f9;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #999;
			margin-bottom: 40rpx;
		}

		.set_defalut_address {
			display: flex;
			align-items: center;
		}

		.yellow_btn {
			margin-top: 300rpx;
		}
	}
</style>